import {NavBar, Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import {useEffect, useRef, useState} from "react";
import axios from "axios";
import moment from "moment/moment";
import '../css/Coupon.css'

export default function GetCoupon() {
    const navigate = useNavigate()
    const data = useRef(null)
    const [status, setStatus] = useState(false)
    const [flag, setFlag] = useState(0)
    const [couponList, setCouponList] = useState([])
    const [userCouponList, setUserCouponList] = useState([])
    let [obj, setObj] = useState({status:false,CouponId:null,code:null})
    const userId = localStorage.getItem('userID')
    //获取优惠券ID
    const [couponId, setCouponId] = useState(null)
    const [num,setNum] = useState(0)
    const back = () =>{
        navigate(-1)
    }


    const setCoupon = async(id) => {
        // let {data:{CouponStatus,CouponId,code}} = await axios.post('/fxs/claim-coupon',{
        //     userId,
        //     couponId: id,
        //     status: true
        // })
        // if(code === 200){
        //     Toast.show({
        //         content: '领取成功',
        //     })
        //
        //     // setStatus( CouponStatus)
        //     setCouponId(CouponId)
        // }
        navigate('/shop')

    }
    const formatDate = (date) => {
        return moment(date).format('YYYY.MM.DD')
    }
    const getCouponList = async() => {

        let {data:{list,code,list1}} = await axios.get('/fxs/coupon',
            {params:{couponId: couponId,num:num}
            })
        if(code === 200){

            setCouponList(list)
            console.log(list)






        }
    }
    const btn=()=>{
        console.log(couponId)


    }

    useEffect(() => {
        getCouponList()


    },[couponId])
    useEffect(() => {
        // getUserCoupon()
        // btn()
    },[couponId])
    // const back = () =>
    //     Toast.show({
    //         content: '点击了返回区域',
    //         duration: 1000,
    //     })
    return (
        <>
            <div className={'coupon-header'}>
                <NavBar onBack={back} style={{backgroundColor: '#e8e7e3', height: '5rem'}}>卡券</NavBar>

            </div>
            <div>
                <div className={'coupon-body'}>
                    <h1>可使用</h1>

                    {couponList.filter(item => new Date(item.endTime).getTime() > Date.now() ).map((item) => {
                        return (
                            <div className={'coupon-item'} ref={data} key={item._id}>
                                <div className={'coupon-item-left'}>
                                    <div className={'coupon-item-title'}>
                                        <span>{item.title}</span>
                                    </div>
                                    <div className={'coupon-item-time'}>
                                        <span>有效期:  </span>  <span>{formatDate(item.startTime)}</span>-<span>{ formatDate(item.endTime)}</span>
                                    </div>
                                </div>
                                <div className={'coupon-item-right'}

                                     onTouchStart={()=>{
                                         setCoupon(item._id)
                                         // setNum(num+1)
                                     } } style={{backgroundColor: new Date(item.endTime).getTime()>Date.now()
                                        ?  '#bea994':'#989898' }}
                                >
                                    <div className={'coupon-item-price'}><span>¥</span><span>{item.price}</span></div>
                                    <div className={'coupon-item-icon'}>
                                        <span className={'iconfont icon-hongbao-m'}></span>
                                    </div>
                                    <div className={'coupon-item-btn'}>{


                                        new Date(item.endTime).getTime()>Date.now()?  '立即使用':'失效' }</div>
                                </div>
                            </div>
                        )
                    })}
                    <div>
                        <h1>已失效</h1>
                        {couponList.filter(item => new Date(item.endTime).getTime()<Date.now() ).map((item) => {
                            return (
                                <div className={'coupon-item'} ref={data} key={item._id}>
                                    <div className={'coupon-item-left'}>
                                        <div className={'coupon-item-title'}>
                                            <span>{item.title}</span>
                                        </div>
                                        <div className={'coupon-item-time'}>
                                            <span>有效期:  </span>  <span>{formatDate(item.startTime)}</span>-<span>{ formatDate(item.endTime)}</span>
                                        </div>
                                    </div>
                                    <div className={'coupon-item-right'}

                                         onTouchStart={()=>{
                                             setCoupon(item._id)
                                             setNum(num+1)
                                         } } style={{backgroundColor: new Date(item.endTime).getTime()>Date.now()
                                            ?  '#bea994':'#989898' }}
                                    >
                                        <div className={'coupon-item-price'}><span>¥</span><span>{item.price}</span></div>
                                        <div className={'coupon-item-icon'}>
                                            <span className={'iconfont icon-hongbao-m'}></span>
                                        </div>
                                        <div className={'coupon-item-btn'}>{


                                            new Date(item.endTime).getTime()>Date.now()?  '立即使用':'已失效' }</div>
                                    </div>
                                </div>
                            )

                        })}


                    </div>
                </div>

            </div>
        </>
    )
}
